<template>
  <div class="attr-list">
    <CommonAttr />
    <px-form>
      <px-form-item label="设置type">
        <px-select
          v-model="
            //@ts-ignores
            curComponent.propValue.type
          "
          class="m-2"
          placeholder="设置type"
        >
          <px-option v-for="item in types" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
      <px-form-item label="iconName">
        <px-select
          v-model="
            //@ts-ignores
            curComponent.propValue.iconName
          "
          class="m-2"
          placeholder="iconName"
        >
          <px-option v-for="item in iconNames" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
      <px-form-item label="title">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.title
          "
        />
      </px-form-item>

      <px-form-item label="unit">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.unit
          "
        />
      </px-form-item>
      <px-form-item label="index">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.index
          "
        />
      </px-form-item>
      <px-form-item label="routerKey">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.routerKey
          "
        />
      </px-form-item>
      <px-form-item label="name">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.name
          "
        />
      </px-form-item>
      <px-form-item label="value">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.value
          "
        />
      </px-form-item>
    </px-form>
  </div>
</template>

<script setup lang="ts">
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
import { ref } from "vue";
const types = ref(["msg", "error", "warn"]);
const iconNames = ref(["co2", "iconerror"]);

const componentStore = useComponent();
const { curComponent } = storeToRefs(componentStore);
</script>
